<!--
  安全功能演示页面
  
  展示Electron中各种安全相关功能：
  - 内容安全策略 (CSP)
  - 安全上下文
  - 权限管理
  - 沙盒模式
  - 上下文隔离
  - 安全协议检查
  - 敏感API访问控制
-->

<template>
  <div class="security-features-page">
    <!-- 页面标题 -->
    <div class="header">
      <h2>🔒 安全功能演示</h2>
      <p class="subtitle">展示 Electron 应用的安全机制和最佳实践</p>
    </div>

    <!-- 功能分组 -->
    <div class="demo-sections">
      
      <!-- 1. 内容安全策略 (CSP) -->
      <div class="demo-section">
        <h3>🛡️ 内容安全策略 (CSP)</h3>
        <p class="description">检查和配置内容安全策略，防止XSS攻击</p>
        <div class="security-info">
          <div class="info-item">
            <label>当前 CSP 策略:</label>
            <code class="csp-policy">{{ cspInfo.policy || '未设置' }}</code>
          </div>
          <div class="info-item">
            <label>CSP 状态:</label>
            <span :class="['status', cspInfo.enabled ? 'enabled' : 'disabled']">
              {{ cspInfo.enabled ? '已启用' : '未启用' }}
            </span>
          </div>
        </div>
        <div class="controls">
          <button @click="checkCSP" class="btn btn-primary">检查 CSP 状态</button>
          <button @click="testCSPViolation" class="btn btn-warning">测试 CSP 违规</button>
        </div>
        <div v-if="cspViolations.length > 0" class="violations">
          <h4>CSP 违规记录:</h4>
          <div v-for="(violation, index) in cspViolations" :key="index" class="violation-item">
            <span class="time">{{ violation.time }}</span>
            <span class="blocked-uri">{{ violation.blockedURI }}</span>
            <span class="directive">{{ violation.violatedDirective }}</span>
          </div>
        </div>
      </div>

      <!-- 2. 安全上下文检查 -->
      <div class="demo-section">
        <h3>🔐 安全上下文检查</h3>
        <p class="description">检查当前页面的安全上下文和环境信息</p>
        <div class="security-context">
          <div class="context-grid">
            <div class="context-item">
              <label>HTTPS 状态:</label>
              <span :class="['status', securityContext.isSecureContext ? 'secure' : 'insecure']">
                {{ securityContext.isSecureContext ? '安全' : '不安全' }}
              </span>
            </div>
            <div class="context-item">
              <label>Origin:</label>
              <code>{{ securityContext.origin }}</code>
            </div>
            <div class="context-item">
              <label>协议:</label>
              <code>{{ securityContext.protocol }}</code>
            </div>
            <div class="context-item">
              <label>沙盒状态:</label>
              <span :class="['status', securityContext.sandboxed ? 'enabled' : 'disabled']">
                {{ securityContext.sandboxed ? '已沙盒' : '未沙盒' }}
              </span>
            </div>
            <div class="context-item">
              <label>Node.js 集成:</label>
              <span :class="['status', securityContext.nodeIntegration ? 'enabled' : 'disabled']">
                {{ securityContext.nodeIntegration ? '已启用' : '已禁用' }}
              </span>
            </div>
            <div class="context-item">
              <label>上下文隔离:</label>
              <span :class="['status', securityContext.contextIsolation ? 'enabled' : 'disabled']">
                {{ securityContext.contextIsolation ? '已启用' : '已禁用' }}
              </span>
            </div>
          </div>
        </div>
        <div class="controls">
          <button @click="checkSecurityContext" class="btn btn-primary">检查安全上下文</button>
          <button @click="showSecurityReport" class="btn btn-info">生成安全报告</button>
        </div>
      </div>

      <!-- 3. 权限管理 -->
      <div class="demo-section">
        <h3>👤 权限管理</h3>
        <p class="description">管理和检查应用的各种权限状态</p>
        <div class="permissions">
          <div class="permission-grid">
            <div v-for="(permission, name) in permissions" :key="name" class="permission-item">
              <div class="permission-info">
                <span class="permission-name">{{ getPermissionDisplayName(name) }}</span>
                <span :class="['permission-status', permission.status]">
                  {{ getPermissionStatusText(permission.status) }}
                </span>
              </div>
              <button @click="requestPermission(name)" 
                      :disabled="permission.status === 'granted'"
                      class="btn btn-sm btn-outline">
                {{ permission.status === 'granted' ? '已授权' : '请求权限' }}
              </button>
            </div>
          </div>
        </div>
        <div class="controls">
          <button @click="checkAllPermissions" class="btn btn-primary">检查所有权限</button>
          <button @click="revokeAllPermissions" class="btn btn-danger">撤销所有权限</button>
        </div>
      </div>

      <!-- 4. 安全协议检查 -->
      <div class="demo-section">
        <h3>🌐 安全协议检查</h3>
        <p class="description">检查网络请求和协议的安全性</p>
        <div class="protocol-checks">
          <div class="check-item">
            <input v-model="protocolTest.url" type="url" placeholder="输入要检查的URL" class="url-input">
            <button @click="checkProtocolSecurity" class="btn btn-primary">检查协议安全性</button>
          </div>
          <div v-if="protocolTest.result" class="check-result">
            <h4>检查结果:</h4>
            <div class="result-grid">
              <div class="result-item">
                <label>协议:</label>
                <span :class="['protocol', protocolTest.result.protocol]">{{ protocolTest.result.protocol }}</span>
              </div>
              <div class="result-item">
                <label>安全等级:</label>
                <span :class="['security-level', protocolTest.result.securityLevel]">
                  {{ protocolTest.result.securityLevelText }}
                </span>
              </div>
              <div class="result-item">
                <label>风险评估:</label>
                <span :class="['risk-level', protocolTest.result.riskLevel]">
                  {{ protocolTest.result.riskText }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 5. 敏感API访问控制 -->
      <div class="demo-section">
        <h3>🔑 敏感API访问控制</h3>
        <p class="description">测试对敏感Electron API的访问控制</p>
        <div class="api-tests">
          <div v-for="(test, name) in apiTests" :key="name" class="api-test-item">
            <div class="test-info">
              <span class="api-name">{{ test.name }}</span>
              <span class="api-description">{{ test.description }}</span>
            </div>
            <div class="test-result">
              <span :class="['access-status', test.accessible ? 'allowed' : 'blocked']">
                {{ test.accessible ? '允许访问' : '访问被阻止' }}
              </span>
              <button @click="testApiAccess(name)" class="btn btn-sm btn-outline">测试访问</button>
            </div>
          </div>
        </div>
        <div class="controls">
          <button @click="testAllApis" class="btn btn-primary">测试所有API</button>
          <button @click="showApiSecurityReport" class="btn btn-info">API安全报告</button>
        </div>
      </div>

      <!-- 6. 安全建议 -->
      <div class="demo-section">
        <h3>💡 安全建议</h3>
        <p class="description">基于当前配置的安全建议和最佳实践</p>
        <div class="security-recommendations">
          <div v-for="(recommendation, index) in securityRecommendations" :key="index" 
               :class="['recommendation-item', recommendation.level]">
            <div class="recommendation-header">
              <span class="recommendation-icon">{{ recommendation.icon }}</span>
              <span class="recommendation-title">{{ recommendation.title }}</span>
              <span :class="['recommendation-level', recommendation.level]">{{ recommendation.levelText }}</span>
            </div>
            <p class="recommendation-description">{{ recommendation.description }}</p>
            <div v-if="recommendation.actions" class="recommendation-actions">
              <button v-for="(action, actionIndex) in recommendation.actions" 
                      :key="actionIndex"
                      @click="executeRecommendation(action)"
                      class="btn btn-sm btn-outline">
                {{ action.text }}
              </button>
            </div>
          </div>
        </div>
        <div class="controls">
          <button @click="generateSecurityReport" class="btn btn-primary">生成完整安全报告</button>
          <button @click="exportSecurityConfig" class="btn btn-success">导出安全配置</button>
        </div>
      </div>
    </div>

    <!-- 消息提示 -->
    <div v-if="message.text" :class="['message', message.type]">
      {{ message.text }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// CSP 相关
const cspInfo = reactive({
  policy: '',
  enabled: false
})

const cspViolations = ref<Array<{
  time: string
  blockedURI: string
  violatedDirective: string
}>>([])

// 安全上下文
const securityContext = reactive({
  isSecureContext: false,
  origin: '',
  protocol: '',
  sandboxed: false,
  nodeIntegration: false,
  contextIsolation: false
})

// 权限管理
const permissions = reactive({
  camera: { status: 'prompt' },
  microphone: { status: 'prompt' },
  notifications: { status: 'prompt' },
  geolocation: { status: 'prompt' },
  clipboard: { status: 'prompt' }
})

// 协议安全检查
const protocolTest = reactive({
  url: '',
  result: null as any
})

// API 访问测试
const apiTests = reactive({
  nodeRequire: {
    name: 'Node.js require()',
    description: '测试是否可以使用 Node.js require 函数',
    accessible: false
  },
  electronRemote: {
    name: 'Electron Remote',
    description: '测试是否可以访问 Electron Remote 模块',
    accessible: false
  },
  fileSystem: {
    name: '文件系统访问',
    description: '测试是否可以直接访问文件系统',
    accessible: false
  },
  childProcess: {
    name: '子进程',
    description: '测试是否可以创建子进程',
    accessible: false
  }
})

// 安全建议
const securityRecommendations = ref<Array<{
  icon: string
  title: string
  description: string
  level: 'high' | 'medium' | 'low'
  levelText: string
  actions?: Array<{ text: string; action: string }>
}>>([])

// 消息提示
const message = reactive({
  text: '',
  type: 'info'
})

/**
 * 显示消息
 */
const showMessage = (text: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') => {
  message.text = text
  message.type = type
  
  setTimeout(() => {
    message.text = ''
  }, 3000)
}

/**
 * 检查 CSP 状态
 */
const checkCSP = () => {
  try {
    // 检查 meta 标签中的 CSP
    const cspMeta = document.querySelector('meta[http-equiv="Content-Security-Policy"]')
    if (cspMeta) {
      cspInfo.policy = cspMeta.getAttribute('content') || ''
      cspInfo.enabled = true
    } else {
      // 检查 HTTP 头中的 CSP
      cspInfo.policy = 'default-src \'self\'; script-src \'self\' \'unsafe-inline\'; style-src \'self\' \'unsafe-inline\''
      cspInfo.enabled = false
    }
    
    showMessage('CSP 状态检查完成', 'success')
  } catch (error) {
    showMessage('CSP 检查失败: ' + error, 'error')
  }
}

/**
 * 测试 CSP 违规
 */
const testCSPViolation = () => {
  try {
    // 尝试执行内联脚本（应该被 CSP 阻止）
    const script = document.createElement('script')
    script.innerHTML = 'console.log("CSP Test");'
    document.head.appendChild(script)
    
    // 记录违规（如果CSP生效，这个脚本不会执行）
    cspViolations.value.unshift({
      time: new Date().toLocaleTimeString(),
      blockedURI: 'inline',
      violatedDirective: 'script-src'
    })
    
    showMessage('CSP 违规测试已执行', 'warning')
  } catch (error) {
    showMessage('CSP 测试失败: ' + error, 'error')
  }
}

/**
 * 检查安全上下文
 */
const checkSecurityContext = () => {
  try {
    securityContext.isSecureContext = window.isSecureContext
    securityContext.origin = window.location.origin
    securityContext.protocol = window.location.protocol
    
    // 检查是否在沙盒中
    securityContext.sandboxed = false // 需要从主进程获取
    
    // 检查 Node.js 集成
    securityContext.nodeIntegration = typeof process !== 'undefined'
    
    // 检查上下文隔离
    securityContext.contextIsolation = typeof window.electronAPI === 'undefined' && typeof window.api !== 'undefined'
    
    showMessage('安全上下文检查完成', 'success')
  } catch (error) {
    showMessage('安全上下文检查失败: ' + error, 'error')
  }
}

/**
 * 显示安全报告
 */
const showSecurityReport = () => {
  const report = [
    `安全上下文: ${securityContext.isSecureContext ? '安全' : '不安全'}`,
    `协议: ${securityContext.protocol}`,
    `Node.js集成: ${securityContext.nodeIntegration ? '启用' : '禁用'}`,
    `上下文隔离: ${securityContext.contextIsolation ? '启用' : '禁用'}`
  ].join('\\n')
  
  showMessage('安全报告已生成', 'info')
  console.log('=== 安全报告 ===\\n' + report)
}

/**
 * 获取权限显示名称
 */
const getPermissionDisplayName = (name: string): string => {
  const names: Record<string, string> = {
    camera: '摄像头',
    microphone: '麦克风',
    notifications: '通知',
    geolocation: '地理位置',
    clipboard: '剪贴板'
  }
  return names[name] || name
}

/**
 * 获取权限状态文本
 */
const getPermissionStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    granted: '已授权',
    denied: '已拒绝',
    prompt: '待询问'
  }
  return statusMap[status] || status
}

/**
 * 请求权限
 */
const requestPermission = async (permissionName: string) => {
  try {
    if ('permissions' in navigator) {
      const result = await navigator.permissions.query({ name: permissionName as any })
      permissions[permissionName as keyof typeof permissions].status = result.state
      showMessage(`${getPermissionDisplayName(permissionName)} 权限: ${getPermissionStatusText(result.state)}`, 'info')
    } else {
      showMessage('权限API不可用', 'warning')
    }
  } catch (error) {
    showMessage(`权限请求失败: ${error}`, 'error')
  }
}

/**
 * 检查所有权限
 */
const checkAllPermissions = async () => {
  if (!('permissions' in navigator)) {
    showMessage('权限API不可用', 'warning')
    return
  }
  
  for (const permissionName of Object.keys(permissions)) {
    try {
      const result = await navigator.permissions.query({ name: permissionName as any })
      permissions[permissionName as keyof typeof permissions].status = result.state
    } catch (error) {
      console.warn(`检查权限 ${permissionName} 失败:`, error)
    }
  }
  
  showMessage('权限检查完成', 'success')
}

/**
 * 撤销所有权限
 */
const revokeAllPermissions = () => {
  // 注意：大多数浏览器不允许程序化撤销权限
  showMessage('权限撤销需要用户在浏览器设置中手动操作', 'info')
}

/**
 * 检查协议安全性
 */
const checkProtocolSecurity = () => {
  try {
    const url = new URL(protocolTest.url)
    const protocol = url.protocol
    
    let securityLevel = 'unknown'
    let securityLevelText = '未知'
    let riskLevel = 'unknown'
    let riskText = '未知风险'
    
    if (protocol === 'https:') {
      securityLevel = 'secure'
      securityLevelText = '安全'
      riskLevel = 'low'
      riskText = '低风险'
    } else if (protocol === 'http:') {
      securityLevel = 'insecure'
      securityLevelText = '不安全'
      riskLevel = 'high'
      riskText = '高风险'
    } else if (protocol === 'file:') {
      securityLevel = 'local'
      securityLevelText = '本地文件'
      riskLevel = 'medium'
      riskText = '中等风险'
    }
    
    protocolTest.result = {
      protocol,
      securityLevel,
      securityLevelText,
      riskLevel,
      riskText
    }
    
    showMessage('协议安全性检查完成', 'success')
  } catch (error) {
    showMessage('URL格式错误: ' + error, 'error')
  }
}

/**
 * 测试API访问
 */
const testApiAccess = (apiName: string) => {
  try {
    switch (apiName) {
      case 'nodeRequire':
        apiTests.nodeRequire.accessible = typeof require !== 'undefined'
        break
      case 'electronRemote':
        apiTests.electronRemote.accessible = typeof (window as any).require !== 'undefined'
        break
      case 'fileSystem':
        apiTests.fileSystem.accessible = typeof process !== 'undefined' && typeof require !== 'undefined'
        break
      case 'childProcess':
        try {
          const child_process = require?.('child_process')
          apiTests.childProcess.accessible = !!child_process
        } catch {
          apiTests.childProcess.accessible = false
        }
        break
    }
    
    const test = apiTests[apiName as keyof typeof apiTests]
    showMessage(`${test.name}: ${test.accessible ? '可访问' : '不可访问'}`, 
                test.accessible ? 'warning' : 'success')
  } catch (error) {
    apiTests[apiName as keyof typeof apiTests].accessible = false
    showMessage(`API测试失败: ${error}`, 'error')
  }
}

/**
 * 测试所有API
 */
const testAllApis = () => {
  for (const apiName of Object.keys(apiTests)) {
    testApiAccess(apiName)
  }
  showMessage('所有API访问测试完成', 'info')
}

/**
 * 显示API安全报告
 */
const showApiSecurityReport = () => {
  const report = Object.entries(apiTests).map(([name, test]) => 
    `${test.name}: ${test.accessible ? '可访问 ⚠️' : '不可访问 ✅'}`
  ).join('\\n')
  
  console.log('=== API安全报告 ===\\n' + report)
  showMessage('API安全报告已生成，请查看控制台', 'info')
}

/**
 * 执行安全建议
 */
const executeRecommendation = (action: any) => {
  showMessage(`执行安全建议: ${action.text}`, 'info')
  // 这里可以实现具体的安全建议执行逻辑
}

/**
 * 生成安全建议
 */
const generateSecurityRecommendations = () => {
  const recommendations = []
  
  // 检查HTTPS
  if (!securityContext.isSecureContext) {
    recommendations.push({
      icon: '🔒',
      title: '启用HTTPS',
      description: '当前连接不安全，建议使用HTTPS协议以保护数据传输安全。',
      level: 'high' as const,
      levelText: '高优先级'
    })
  }
  
  // 检查Node.js集成
  if (securityContext.nodeIntegration) {
    recommendations.push({
      icon: '⚠️',
      title: '禁用Node.js集成',
      description: '启用Node.js集成会增加安全风险，建议在渲染进程中禁用。',
      level: 'high' as const,
      levelText: '高优先级'
    })
  }
  
  // 检查上下文隔离
  if (!securityContext.contextIsolation) {
    recommendations.push({
      icon: '🔐',
      title: '启用上下文隔离',
      description: '上下文隔离可以防止渲染进程访问Node.js API，提高安全性。',
      level: 'medium' as const,
      levelText: '中优先级'
    })
  }
  
  // 检查CSP
  if (!cspInfo.enabled) {
    recommendations.push({
      icon: '🛡️',
      title: '配置内容安全策略',
      description: 'CSP可以防止XSS攻击和代码注入，建议配置严格的CSP策略。',
      level: 'medium' as const,
      levelText: '中优先级'
    })
  }
  
  // 检查敏感API访问
  const accessibleApis = Object.values(apiTests).filter(test => test.accessible)
  if (accessibleApis.length > 0) {
    recommendations.push({
      icon: '🔑',
      title: '限制敏感API访问',
      description: '检测到可访问的敏感API，建议通过preload脚本安全地暴露必要功能。',
      level: 'high' as const,
      levelText: '高优先级'
    })
  }
  
  securityRecommendations.value = recommendations
}

/**
 * 生成完整安全报告
 */
const generateSecurityReport = () => {
  const report = {
    timestamp: new Date().toISOString(),
    securityContext,
    cspInfo,
    permissions: Object.fromEntries(
      Object.entries(permissions).map(([name, perm]) => [name, perm.status])
    ),
    apiAccess: Object.fromEntries(
      Object.entries(apiTests).map(([name, test]) => [name, test.accessible])
    ),
    recommendations: securityRecommendations.value.length
  }
  
  console.log('=== 完整安全报告 ===', report)
  showMessage('完整安全报告已生成，请查看控制台', 'success')
}

/**
 * 导出安全配置
 */
const exportSecurityConfig = () => {
  const config = {
    webSecurity: true,
    nodeIntegration: false,
    contextIsolation: true,
    enableRemoteModule: false,
    sandbox: true,
    csp: "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';",
    permissions: ['notifications']
  }
  
  const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'electron-security-config.json'
  a.click()
  
  showMessage('安全配置已导出', 'success')
}

// 组件挂载时的初始化
onMounted(() => {
  showMessage('安全功能演示已就绪', 'success')
  
  // 初始化检查
  checkSecurityContext()
  checkCSP()
  checkAllPermissions()
  generateSecurityRecommendations()
  
  // 监听CSP违规事件
  document.addEventListener('securitypolicyviolation', (e) => {
    cspViolations.value.unshift({
      time: new Date().toLocaleTimeString(),
      blockedURI: e.blockedURI,
      violatedDirective: e.violatedDirective
    })
  })
})
</script>

<style scoped>
.security-features-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h2 {
  color: var(--primary-color);
  margin-bottom: 8px;
  font-size: 2.2rem;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin: 0;
}

.demo-sections {
  display: grid;
  gap: 30px;
}

.demo-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-section h3 {
  color: var(--primary-color);
  margin: 0 0 10px 0;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.description {
  color: var(--text-secondary);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.security-info, .security-context {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.info-item, .context-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.info-item:last-child, .context-item:last-child {
  border-bottom: none;
}

.info-item label, .context-item label {
  font-weight: 500;
  color: var(--text-primary);
}

.csp-policy {
  background: var(--bg-primary);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9rem;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
}

.status.enabled, .status.secure, .status.allowed {
  background: var(--success-light);
  color: var(--success-color);
}

.status.disabled, .status.insecure, .status.blocked {
  background: var(--error-light);
  color: var(--error-color);
}

.context-grid {
  display: grid;
  gap: 10px;
}

.permissions {
  margin-bottom: 15px;
}

.permission-grid {
  display: grid;
  gap: 12px;
}

.permission-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-tertiary);
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.permission-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.permission-name {
  font-weight: 500;
  color: var(--text-primary);
}

.permission-status {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.protocol-checks {
  margin-bottom: 15px;
}

.check-item {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 15px;
}

.url-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.url-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.check-result {
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.result-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.protocol {
  font-family: monospace;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-primary);
}

.security-level.secure {
  color: var(--success-color);
}

.security-level.insecure {
  color: var(--error-color);
}

.security-level.local {
  color: var(--warning-color);
}

.risk-level.low {
  color: var(--success-color);
}

.risk-level.medium {
  color: var(--warning-color);
}

.risk-level.high {
  color: var(--error-color);
}

.api-tests {
  margin-bottom: 15px;
}

.api-test-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.test-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.api-name {
  font-weight: 500;
  color: var(--text-primary);
}

.api-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.test-result {
  display: flex;
  align-items: center;
  gap: 12px;
}

.access-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}

.violations {
  margin-top: 15px;
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.violation-item {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-family: monospace;
  font-size: 0.9rem;
}

.violation-item:last-child {
  border-bottom: none;
}

.time {
  color: var(--text-secondary);
  min-width: 80px;
}

.blocked-uri {
  color: var(--error-color);
  flex: 1;
}

.directive {
  color: var(--warning-color);
}

.security-recommendations {
  margin-bottom: 15px;
}

.recommendation-item {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  border-left: 4px solid;
}

.recommendation-item.high {
  border-left-color: var(--error-color);
}

.recommendation-item.medium {
  border-left-color: var(--warning-color);
}

.recommendation-item.low {
  border-left-color: var(--success-color);
}

.recommendation-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.recommendation-icon {
  font-size: 1.2rem;
}

.recommendation-title {
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.recommendation-level {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.recommendation-level.high {
  background: var(--error-light);
  color: var(--error-color);
}

.recommendation-level.medium {
  background: var(--warning-light);
  color: var(--warning-color);
}

.recommendation-level.low {
  background: var(--success-light);
  color: var(--success-color);
}

.recommendation-description {
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.recommendation-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-success {
  background: var(--success-color);
  color: white;
}

.btn-success:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-warning {
  background: var(--warning-color);
  color: white;
}

.btn-warning:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-danger {
  background: var(--error-color);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-info {
  background: var(--info-color, #3b82f6);
  color: white;
}

.btn-info:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
}

.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.btn-outline:hover:not(:disabled) {
  background: var(--primary-light);
}

.btn-sm {
  padding: 4px 8px;
  font-size: 0.8rem;
}

.message {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-width: 400px;
}

.message.success {
  background: var(--success-color);
}

.message.error {
  background: var(--error-color);
}

.message.warning {
  background: var(--warning-color);
}

.message.info {
  background: var(--info-color, #3b82f6);
}
</style>
